<template>
  <div class="talentShowBar">
    <div class="title">
      人才推介
      <div class="more" @click="typeMore()">更多+</div>
    </div>
    <div id="talentWrap">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div v-for="(item,i) in talentList" :key="i" class="swiper-slide" ref="swiperSlide" @click="toDetail(item,i)">
            <div class="tuimg">
              <PublicImage :src="item.headUrl"></PublicImage>
            </div>
            <div class="bottom">
							<div class="name">
								姓名：{{comName(item.name)}} 
								<span class="l">|</span> 
								<span class="major" v-if="(expertTypes && expertTypes.length>0) && item.expertType">
                  专家：{{$selectDict(expertTypes, item.expertType).dictLabel}}
                </span>
							</div>
							<div class="tag">
								擅长领域：
								<span>{{lndustryField(item.lndustryField)}}</span>
							</div>
						</div>
          </div>
        </div>
      </div>
			<!-- 下面的点 -->
      <!-- <div class="swiper-pagination"></div> -->
      <div class="swiper-button-prev">&lt;</div>
      <div class="swiper-button-next">&gt;</div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/dist/js/swiper.min.js";
import {request} from '@/utils/request.js'
import config from '@/utils/config.js'
import { getTalentList } from '@/common/api/help'
import PublicImage from "@/components/publicImage";
export default {
  name: "showBar",
	data() {
		return {
			talentList: [],
			swiper: null,
			industryFields: [],
			expertTypes: [],
			eq2: null
		}
  },
  components: {
    PublicImage
  },
	mounted(){
		// lndustryField 行业领域 expertType 专家类型
    this.getTalentList();
    this.gettypeList()
    
	},
	computed: {
		lndustryField() {
			return function(value){
				let strs = []
        if(value){
          strs = value.split(',')
        }
        let data = []
        if(this.industryFields && this.industryFields.length>0) {
          strs.forEach((el, i) => {
            data.push(this.$selectDict(this.industryFields, el).dictLabel)
          });
          let str = data.join(',')
          return str.length > 30 ? str.substring(0,30) + '...' : str
        }
				
			}
    },
    comName() {
      return function(val) {
        return val.length > 6 ? val.substring(0,6) + '...' : val
      }
    }
	},
	methods: {
		typeMore() {
      this.$router.push({ path: "/help/talentRecommendList" });
    },
    // 字典查询 
    async gettypeList() {
      let api = `company_industry,expert_type`;
      // 调用公共方法中的查询字典表
      this.getDictList(this, api).then((res) => {
        this.industryFields = res.company_industry;
        this.expertTypes = res.expert_type;
      });
    },
		// 获取人才列表
		async getTalentList(){
			let data = {
				pageNum: 1,
				pageSize: 5,
				// education: '',
				// quickSearch: ''
			}
			const { code, msg, rows} = await getTalentList(data);
      if(code != '200') return this.$message.warning(msg);
			this.talentList = rows;
			this.$nextTick(() => {
				this.initSwiper()
				this.mouseenterSwiper()
			})
		},
		// 鼠标移入，移出事件
		mouseenterSwiper(){
			 let arr = this.$refs.swiperSlide
			 if(arr.length) {
				 console.log('this.swiper', this.swiper.autoplay)
				 let swipe = this.swiper.autoplay
				 arr.forEach((item,index) => {
					 // 鼠标移入
					 	arr[index].onmouseover = function (){
							// console.log('123')
							swipe.stop()
						}
						// 鼠标移出
						arr[index].onmouseout = function (){
							// console.log('456')
							swipe.start()
						}
				 })
			 }

		},
		initSwiper(){
			this.swiper = new Swiper("#talentWrap .swiper-container", {
				watchSlidesProgress: true,
				slidesPerView: "auto",
				centeredSlides: true,
				loop: true,
				loopedSlides: 5,
				mousewheel: true,  //  滚动
				autoplay: {
					disableOnInteraction: false,
					delay: 3500,
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
				// pagination: {
				//   el: ".swiper-pagination",
				//   clickable :true,
				// },
				on: {
					progress: function (progress) {
						// console.log(this)
						for (let i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i);
							var slideProgress = this.slides[i].progress;
							let modify = 1;
							if (Math.abs(slideProgress) > 1) {
								modify = (Math.abs(slideProgress) - 1) * 0.21 + 1;
							}
							let translate = slideProgress * modify * 70 + "px";
							let scale = 1 - Math.abs(slideProgress) / 8;
							let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
							slide.transform(
								"translateX(" + translate + ") scale(" + scale + ")"
							);
							slide.css("zIndex", zIndex);
							slide.css("opacity", 1);
							if (Math.abs(slideProgress) > 3) {
								slide.css("opacity", 0);
							}
						}
					},
					setTransition: function (transition) {
						for (let i = 0; i < this.slides.length; i++) {
							let slide = this.slides.eq(i);
							slide.transition(transition);
						}
					},
				},
			
			});
			// this.swiper.slideTo(2)
		},
		toDetail(item, i) {
			// this.swiper.slideTo(i)
			this.$router.push({ name: 'talentRecommendDetail', params: { talent: JSON.stringify(item), isHelp: true } });
		}
	},
};
</script>

<style lang="scss" scoped>
.talentShowBar {
  background: url("../../../assets/image/help/bg2.png");
  height: 530px;
  .title {
    width: 1200px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    font-size: 28px;
    letter-spacing: 5px;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    .more {
      position: absolute;
      right: 0;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
// .card {
//   width: 325px;
//   height: 363px;
//   background: #e4e4e4;
// }

#talentWrap {
  position: relative;
  width: 1200px;
  margin: 0 auto;
	.swiper-container {
		padding-bottom: 60px;
		.swiper-wrapper {
			.swiper-slide {
				width: 325px;
				height: 363px;
				background: #fff;
				box-shadow: 7px 11px 30px 5px rgba(0, 19, 39, 0.14);
				cursor: pointer;
				&.swiper-slide-active {
					.bottom {
						padding: 26px 20px;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						background: #045db9;
						transition: .5s;
						.name {
							font-size: 18px;
							font-weight: bold;
							color: #fff;
							.l {
								font-size: 22px;
								color: #fff;
								font-weight: normal;
							}
							.major {
								font-size: 14px;
								color: #fff;
							}
						}
						.tag {
							font-size: 14px;
							color: #fff;
							text-align: left;
							margin-top: 15px;
							span {
								color: #fff;
							}
						}
					}
				}
				img {
					object-fit: revert;
					width: 325px;
					height: 240px;
					display: block;
					background: #e4e4e4;
        }
        .tuimg{
          object-fit: revert;
					width: 325px;
					height: 240px;
					display: block;
					background: #e4e4e4;
        }
				.bottom {
					height: 123px;
					padding: 26px 20px;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					.name {
						font-size: 18px;
						font-weight: bold;
						color: #333;
						.l {
							font-size: 22px;
							color: #ddd;
							font-weight: normal;
						}
						.major {
							font-size: 14px;
							color: #999;
						}
					}
					.tag {
						font-size: 14px;
						color: #999;
						text-align: left;
						margin-top: 15px;
						span {
							color: rgba(4,93,185,1);
						}
					}
				}
			}
		}
	}
	.swiper-button-prev {
		top: 50%;
		left: -80px;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
		background: #fff;
		border-radius: 50%;
		line-height: 42px;
		text-align: center;
		color: #999;
	}
 .swiper-button-next {
	 	top: 50%;
		right: -80px;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
		background: #fff;
		border-radius: 50%;
		line-height: 42px;
		text-align: center;
		color: #999;
	}
}
</style>
